<template>
  <div class="student-leave-container">
    <!-- 页面头部 -->
    <div class="header-section">
      <h1 class="title">学生信息管理</h1>
      <div class="search-bar">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索学生姓名、专业或地址"
          clearable
          @clear="handleSearch"
          @keyup.enter.native="handleSearch">
          <template #append>
            <el-button icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </template>
        </el-input>
        <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新数据</el-button>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-section">
      <div class="filter-item">
        <span>大学专业：</span>
        <el-select
          v-model="majorFilter"
          placeholder="筛选专业"
          size="small"
          clearable
          @change="handleMajorFilter">
          <el-option
            v-for="major in majors"
            :key="major"
            :label="major"
            :value="major">
          </el-option>
        </el-select>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <el-card shadow="hover" class="table-card">
        <el-table
          :data="filteredData"
          stripe
          border
          highlight-current-row
          :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }">
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="studentId"  
            label="学号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="学生姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="80">
            <template #default="scope">
              <el-tag :type="scope.row.gender === '男' ? 'primary' : 'success'">
                {{ scope.row.gender }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="major"
            label="大学专业"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="家庭住址">
          </el-table-column>
          <el-table-column
            label="操作"
            width="120">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="viewDetails(scope.row)">查看</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="editStudent(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 分页控制 -->
    <div class="pagination-section">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>

    <!-- 查看详情对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="学生详情">
      <template #content>
        <el-form label-width="120px" class="dialog-form">
          <el-form-item label="学生姓名">
            <el-input v-model="dialogForm.name" disabled style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="dialogForm.studentId" disabled style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="dialogForm.gender" disabled style="width: 100px;"></el-input>
          </el-form-item>
          <el-form-item label="大学专业">
            <el-input v-model="dialogForm.major" disabled style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址">
            <el-input v-model="dialogForm.address" type="textarea" :rows="4" disabled style="width: 400px;"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 原始数据
      tableData: [
        { studentId: '2212630101', name: '李明轩', gender: '男', major: '软件工程', address: '北京市海淀区中关村南大街5号' },
        { studentId: '2212630102', name: '王雨桐', gender: '女', major: '软件工程', address: '北京市朝阳区望京西路8号' },
        { studentId: '2212630103', name: '张子涵', gender: '男', major: '软件工程', address: '北京市西城区西长安街11号' },
        { studentId: '2212630201', name: '刘诗雨', gender: '女', major: '计算机科学与技术', address: '上海市浦东新区张江高科技园区' },
        { studentId: '2212630202', name: '陈宇航', gender: '男', major: '计算机科学与技术', address: '上海市徐汇区漕溪北路1200号' },
        { studentId: '2212630203', name: '赵雅琪', gender: '女', major: '计算机科学与技术', address: '上海市静安区南京西路1266号' },
        { studentId: '2212630301', name: '周子轩', gender: '男', major: '人工智能', address: '广州市天河区珠江新城' },
        { studentId: '2212630302', name: '吴思颖', gender: '女', major: '人工智能', address: '广州市越秀区东风中路363号' },
        { studentId: '2212630303', name: '郑浩然', gender: '男', major: '人工智能', address: '广州市海珠区新港西路135号' },
        { studentId: '2212630401', name: '孙雨欣', gender: '女', major: '数据科学', address: '深圳市南山区科技园' },
        { studentId: '2212630402', name: '朱梓晨', gender: '男', major: '数据科学', address: '深圳市福田区深南大道6008号' },
        { studentId: '2212630403', name: '胡佳琪', gender: '女', major: '数据科学', address: '深圳市罗湖区深南东路5002号' },
        { studentId: '2212630501', name: '林俊杰', gender: '男', major: '网络安全', address: '杭州市西湖区文三路388号' },
        { studentId: '2212630502', name: '黄梦瑶', gender: '女', major: '网络安全', address: '杭州市余杭区文一西路969号' },
        { studentId: '2212630503', name: '徐嘉豪', gender: '男', major: '网络安全', address: '杭州市上城区庆春路228号' },
        { studentId: '2212630601', name: '高诗涵', gender: '女', major: '物联网工程', address: '南京市鼓楼区汉口路22号' },
        { studentId: '2212630602', name: '梁志强', gender: '男', major: '物联网工程', address: '南京市玄武区四牌楼2号' },
        { studentId: '2212630603', name: '谢雨晴', gender: '女', major: '物联网工程', address: '南京市建邺区江东中路369号' },
        { studentId: '2212630701', name: '欧阳晨', gender: '男', major: '数字媒体技术', address: '成都市武侯区一环路南一段24号' },
        { studentId: '2212630702', name: '慕容雪', gender: '女', major: '数字媒体技术', address: '成都市锦江区红星路三段1号' },
        { studentId: '2212630703', name: '上官云飞', gender: '男', major: '数字媒体技术', address: '成都市青羊区人民南路三段17号' }
      ],
      
      // 分页控制
      currentPage: 1,
      pageSize: 10,
      
      // 筛选条件
      searchKeyword: '',
      majorFilter: '',
      
      // 专业列表（用于筛选下拉框）
      majors: ['软件工程', '计算机科学与技术', '人工智能', '数据科学', '网络安全', '物联网工程', '数字媒体技术'],
      
      // 对话框相关
      dialogVisible: false,
      dialogForm: {}
    }
  },
  computed: {
    // 计算过滤后的数据
    filteredData() {
      let data = this.tableData;
      
      // 搜索过滤
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        data = data.filter(item => 
          item.name.toLowerCase().includes(keyword) || 
          item.major.toLowerCase().includes(keyword) || 
          item.address.toLowerCase().includes(keyword) ||
          item.studentId.toLowerCase().includes(keyword)
        );
      }
      
      // 专业过滤
      if (this.majorFilter) {
        data = data.filter(item => item.major === this.majorFilter);
      }
      
      // 分页处理
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return data.slice(start, end);
    }
  },
  methods: {
    // 分页相关方法
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    
    // 搜索相关方法
    handleSearch() {
      this.currentPage = 1; // 重置到第一页
    },
    handleMajorFilter() {
      this.currentPage = 1; // 重置到第一页
    },
    
    // 刷新数据
    refreshData() {
      // 模拟数据刷新
      this.$message.success('数据已刷新');
    },
    
    // 查看详情
    viewDetails(row) {
      this.dialogForm = { ...row };
      this.dialogVisible = true;
    },
    
    // 编辑学生信息
    editStudent(row) {
      // 这里可以实现编辑功能
      this.$message({
        type: 'info',
        message: `编辑学生: ${row.name}`
      });
    }
  }
}
</script>
<style scoped>
.student-leave-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-section {
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}

.search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-bar .el-input {
  flex: 1;
  max-width: 600px;
}

.filter-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-section {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-section {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

/* 动画效果 */
.el-table {
  transition: all 0.3s ease;
}

.el-button {
  transition: all 0.2s ease;
}

.el-button:hover {
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-bar .el-input {
    max-width: none;
  }
  
  .el-table__header-wrapper th:nth-child(5),
  .el-table__body-wrapper td:nth-child(5) {
    display: none;
  }
  
  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }
}

.dialog-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>